<!DOCTYPE html>
<html>
	<!-- 请在服务器端运行该程序以获得正确路径 -->

	<head>
		<meta charset="utf-8">
		<title>i18n Demo</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" href="">
	</head>

	<body>
		<!-- 显示的主体内容 -->
		<div i18n="footer.about" >About</div>
		<div i18n="footer.contact" title="footer.title" i18n-only="title,html,xx" xx="footer.title">Contact us</div>
		<!-- 切换按钮 -->
		<button type="button" class="chinese">切换为中文</button>
		<button type="button" class="english">switch to english</button>
	</body>

	<script src="./dist/i18n.js"></script>
	<script>
		/*默认语言*/
		i18n("[i18n]", {
			defaultLang: 'cn', // 设置默认语言，
			filePath: "./i18n/",
			filePrefix: "i18n_",
			fileSuffix: "",
			forever:true,// 默认为 true  保存当前语言，设置为 false 后，每次刷新都为cn 
			get: true,
			only: ['value', 'html', 'placeholder', 'title'], // 全局设置i18n-only，默认值：['value', 'html', 'placeholder', 'title']
			callback: function() {
				console.log("i18n is ready.");
			}
		});
		console.log('默认 ======================')
		console.log(i18n.get('footer.about'))
		console.log("===============")

		/*切换为中文 - 按钮*/
		var cnBtn = document.querySelector(".chinese");

		cnBtn.addEventListener('click', function() {
				i18n("[i18n]", {
					lang: "cn",// 变更语言
					filePath: "./i18n/",
					get: true
				});
				console.log("中文===============")
				console.log(i18n.get("footer.about"));
			},
			false);
		/*切换为英文 - 按钮*/
		var enBtn = document.querySelector(".english");
		enBtn.addEventListener('click', function() {
				i18n("[i18n]", {
					lang: "en",
					filePath: "./i18n/",
					get: true
				})
				console.log("en===============")
				console.log(i18n.get("footer.about"));
			},
			false);
	</script>

	<!-- 放在 i18n初始化后面   在js中直接获取 i18n.get(key)-->
	<script src="./index.js"></script>

</html>